<style scoped>
  .expand-row{
    margin-bottom: 16px;
  }
  .lyx-table-btn{
    margin-right: 5px;
    margin-bottom: 2px;
  }
  .title-size {
    font-weight: bold;
    font-size: 1rem;
  }
</style>
<template>
  <div>
    <Form label-position="right" :label-width="100" style="position: relative;" :model="formDate">
      <Row class="mb20">
        <Col span="13" class="ivu-form-item-label title-size">家庭住房保障情况（实物配租申请）</Col>
      </Row>
      <Row class="mb20">
        <Col span="5" class="ivu-form-item-label">是否享受住房保障：</Col>
        <Col span="5" offset="1" class="ivu-form-item-content">
          <RadioGroup v-model="formDate.ensureSituation">
            <Radio :label="item.value" v-for="item in xiangshou" :value="item.value" :key="item.value">{{item.label}}</Radio>
          </RadioGroup>
        </Col>
      </Row>
      <Row class="mb20">
        <Col span="5" class="ivu-form-item-label">享受住房保障方式：</Col>
        <Col span="12" offset="1" class="ivu-form-item-content">
            <RadioGroup v-model="formDate.ensureType">
              <Radio label="1">租房补贴</Radio>
              <Radio label="2">实物配租</Radio>
              <Radio label="3">租金核减</Radio>
              <Radio label="4">经济适用住房</Radio>
              <Radio label="5">政府补贴房</Radio>
              <Radio label="6">公租房</Radio>
            </RadioGroup>
        </Col>
      </Row>
      <Row class="mb20">
        <Col span="5" class="ivu-form-item-label">社区委员会：</Col>
        <Col span="2" class="ivu-form-item-label">负责人</Col>
        <Col span="3" class="ivu-form-item-content">
          <!--            <Select v-model="formDate.commPrincipal">-->
          <!--              <Option v-for="(item, key) in person_list" :value="item.value" :key="key">{{ item.label }}</Option>-->
          <!--            </Select>-->
          <Input v-model="formDate.commPrincipal"></Input>
        </Col>
        <Col span="1" class="ivu-form-item-label">时间</Col>
        <Col span="3" class="ivu-form-item-content">
          <DatePicker type="date" v-model="formDate.commDate"></DatePicker>
        </Col>
        <Col span="3" class="ivu-form-item-label">申请地社区经办人</Col>
        <Col span="5">
          <Input v-model="formDate.committeeHandler"></Input>
        </Col>
      </Row>
      <Row class="mb20">
        <Col span="5" class="ivu-form-item-label">本次发放月份：</Col>
        <Col span="3" offset="1" class="ivu-form-item-content">
          <Select v-model="formDate.currentYear">
            <Option v-for="item in yearList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Col>
        <Col span="3" offset="1" class="ivu-form-item-content">
          <CheckboxGroup  v-model="monthTypeArr"  v-for="(item,index) in selectMonthArr" v-bind:key="index">
            <Checkbox :label="item.value" style="width: max-content;float: left">{{item.label}}</Checkbox>
          </CheckboxGroup>
        </Col>
        <Col span="3" class="ivu-form-item-label">
          <span style="color:red">本次发放月份必填</span>
        </Col>
      </Row>
      <Row class="mb20">
        <Col span="13" class="ivu-form-item-label">
          <Button @click="save()">提交家庭住房保障情况</Button>
        </Col>
      </Row>
    </Form>
  </div>
</template>
<script>
// import { itemParamByOrderList } from '@/api/eventlist'
import { date2str } from '@/api/eventlist'
export default {
  name: 'Form17_3',
  data () {
    return {
      monthTypeArr: [],
      selectMonthArr: [],
      nowYear: '',
      nowMonth: '',
      yearList: [],
      aa: '',
      xiangshou: [{ value: 2, label: '未享受' }, { value: 3, label: '曾经享受' }],
      bwk: '0',
      paramsArr: [],
      list: [],
      sectionList: [],
      streetList: [],
      committeesList: [],
      batchList: [],
      person_list: [],
      paper_list: [
        { label: '优抚', value: '1' },
        { label: '大病', value: '2' },
        { label: '重残', value: '3' },
        { label: '老龄', value: '4' },
        { label: '残疾', value: '5' },
        { label: '孤独', value: '6' }
      ]
    }
  },
  props: {
    formDate: Object
  },
  mounted () {
    if (this.formDate.currentMonth) {
      this.monthTypeArr = this.formDate.currentMonth.split(',')
      console.log(this.monthTypeArr, '!!!!!')
    }
    if (this.formDate.currentYear) {
      this.formDate.currentYear = parseInt(this.formDate.currentYear)
    }
    var myDate = new Date()
    this.nowYear = myDate.getYear() // 获取当前年份(2位)
    myDate.getFullYear() // 获取完整的年份(4位,1970-????)
    this.yearList.push({ label: myDate.getFullYear(), value: myDate.getFullYear() })
    this.nowMonth = myDate.getMonth() + 1 // 获取当前月份(0-11,0代表1月)
    this.getSelectMonth()
  },
  watch: {
  },
  methods: {
    getSelectMonth () {
      var monthArr = []
      monthArr = this.getQuarterStartMonth()
      this.selectMonthArr = []
      for (var i = 0; i < monthArr.length; i++) {
        if (monthArr[i] > this.nowMonth || monthArr[i] === this.nowMonth) {
          var obj = {
            label: monthArr[i].toString(),
            value: monthArr[i].toString()
          }
          this.selectMonthArr.push(obj)
          console.log(this.selectMonthArr, '!@#!#!@#')
        }
      }
    },
    // 获得本季度的开端月份
    getQuarterStartMonth () {
      var quarterStartMonth = []
      if (this.nowMonth < 4) {
        quarterStartMonth = [1, 2, 3]
      }
      if (this.nowMonth > 3 && this.nowMonth < 7) {
        quarterStartMonth = [4, 5, 6]
      }
      if (this.nowMonth > 6 && this.nowMonth < 10) {
        quarterStartMonth = [7, 8, 9]
      }
      if (this.nowMonth > 9) {
        quarterStartMonth = [10, 11, 12]
      }
      return quarterStartMonth
    },
    save () {
      if (this.monthTypeArr.length > 0) {
        this.formDate.currentMonth = this.monthTypeArr.join(',')
      }
      this.formDate.currentYear = this.formDate.currentYear.toString()
      this.formDate.commDate = date2str(this.formDate.commDate)
      if (this.formDate.ensureSituation === undefined) {
        this.$Notice.error({ title: '请选择住房保障', desc: '' })
        return false
      }
      if (this.formDate.ensureSituation === 3) {
        if (this.formDate.ensureType === undefined || this.formDate.ensureType === '') {
          console.log(this.formDate, '!!!')
          this.$Notice.error({ title: '请选择享受住房保障方式', desc: '' })
          return false
        }
      }
      if (!this.formDate.commPrincipal) {
        this.$Notice.error({ title: '请选择负责人', desc: '' })
        return false
      }
      if (!this.formDate.committeeHandler) {
        this.$Notice.error({ title: '请选择经办人', desc: '' })
        return false
      }
      console.log(this.formDate)
      this.$emit('ee')
    }
  }
}
</script>
